<template>
	<view class="content">

		<view class="header">
			<view class="uni-flex uni-row" style="align-items: center;">

				<view class="img-profile">
					<image :src="user.profile" mode=""></image>
				</view>
				<view>
					<view class="nikename" @tap="toSetting">
						{{user.user_name}}
					</view>
					<view class="nikename" style="font-weight: normal;" v-if="user.id">
						ID:{{user.id}}
					</view>
					<!-- 	<view class="uni-flex uni-row">
						<view class="subscribe-view" @click="selectAddress()">
							<view v-if="addlength">
								<view v-if="recinfo.detailInfo">
									<view class="tel-name">
										<view class="name">
											{{recinfo.userName}}
										</view>
										<view class="tel">
											{{recinfo.telNumber}}
										</view>
									</view>
									<view class="addres">
										{{recinfo.provinceName}}
										{{recinfo.cityName}}
										{{recinfo.countyName}}
										{{recinfo.detailInfo}}
									</view>
								</view>
								<view v-else>
									<view class="tel-name">
										<view class="name">
											{{recinfo.username}}
										</view>
										<view class="tel">
											{{recinfo.phone}}
										</view>
									</view>
									<view class="addres">
										{{recinfo.recycle_address}}
										{{recinfo.address}}
									</view>
								</view>

							</view>
							<view class="subscribe-view-right isselect" v-else>
								请选择取件地址
							</view>
						</view>
					</view> -->
				</view>
			</view>

		</view>

		<!-- <view class="tab">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'active':index==timeActive}"
				@click="selectTimeEvent(index)">{{item.title}}</view>
		
		</view> -->


		<view class="hspl">
			<view class="gg-title">可回收品类</view>
			<view class="hspl-content">
				<view class="hspl-content-item" v-for="(item,index) in typeList" :key="index"
					:class="[type==item.sort?'select':'']" @click="changeType(item.sort,item.num)">
					<image :src="item.img" mode="widthFix" :style="{background:item.bg}"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="ygzl">
			<view class="ygzl-title">预估重量</view>
			<view class="ygzl-content">
				<view class="ygzl-content-item" :class="[weight=='1'?'select':'']" @click="changeWeight('1')">
					<text>5-20公斤</text>
					<text class="ms">(超15件)</text>
				</view>
				<view class="ygzl-content-item" :class="[weight=='2'?'select':'']" @click="changeWeight('2')">
					<text>20-50公斤</text>
					<text class="ms">(超30件)</text>
				</view>
				<view class="ygzl-content-item" :class="[weight=='3'?'select':'']" @click="changeWeight('3')">
					<text>50公斤以上</text>
					<text class="ms">(超50件)</text>
				</view>
			</view>
		</view>
		<view style="background: #fff;" id='subscribe'>
			<view class="subscribe" :style="{border:pass?'2px solid red':''}">
				<view class="subscribe-view" @click="selectAddress()">
					<view class="subscribe-view-left"> 取件地址 </view>
					<view v-if="addlength">
						<view v-if="recinfo.detailInfo">
							<view class="tel-name">
								<view class="name">
									{{recinfo.userName}}
								</view>
								<view class="tel">
									{{recinfo.telNumber}}
								</view>
							</view>
							<view class="addres">
								{{recinfo.provinceName}}
								{{recinfo.cityName}}
								{{recinfo.countyName}}
								{{recinfo.detailInfo}}
							</view>
						</view>
						<view v-else>
							<view class="tel-name">
								<view class="name">
									{{recinfo.username}}
								</view>
								<view class="tel">
									{{recinfo.phone}}
								</view>
							</view>
							<view class="addres">
								{{recinfo.recycle_address}}
								{{recinfo.address}}
							</view>
						</view>

					</view>
					<view class="subscribe-view-right isselect" v-else>
						请选择取件地址
					</view>
				</view>

				<view class="subscribe-view" style="border-bottom: 0;">
					<view class="subscribe-view-left"> 预约时间 </view>
					<view class="subscribe-view-right isselect" @click="bindTimeChange">

						<view class="uni-input">{{
			        selectTime === "" ? "请选择预约时间" : selectTime
			      }}</view>
					</view>
				</view>


			</view>
		</view>
		<view class="explain" v-if="is_true">
			<view class="explain-title">温馨提示</view>
			<view class="explain-content">1、我平台定期赠送衣物给一些贫困人群</view>
			<view class="explain-content">2、️如果您的经济条件较好，可以选择免费赠送</view>
		</view>

		<view class="yszc">
			<view class="checkbox" @click="selfChangde()">
				<checkbox :checked="checked" color="#3cbdc5" />
			</view>
			<view class="note">
				使用本服务表明您已同意
				<text @tap="toyszc()">《衣之光回收服务协议》</text>
			</view>
		</view>

		<view class="require">
			<view class="item">
				<text class="bt">预约流程</text>
				<text class="ms">全程免费</text>
			</view>
			<view class="item">
				<text class="bt">回收要求</text>
				<text class="ms">衣帽鞋包等</text>
			</view>
			<view class="item">
				<text class="bt">免费上门</text>
				<text class="ms">各大物流</text>
			</view>
		</view>



		<view class="problem" style="margin-bottom: 0;" id='reward'>
			<view class="title">选择回收奖励</view>
			<view class="list" style="margin-bottom: 0;padding-top: 20rpx;">
				<view v-for="(item, index) in welfareList" :key="index" class="welfare-list">
					<view class="content welfare-box" :class="[welfare===item.hs_type?'select':'']"
						@click="welfareclick(item.hs_type)">
						<image :src="item.src" mode="aspectFit"
							style="width:150rpx;height: 150rpx;margin-right: 30rpx;"></image>
						<view class="text">
							<view>
								<text class="label">{{item.label}}</text>
								{{item.text}}
								<text style="color: #3cbdc5;" @click.stop="details()" v-if="item.hs_type==='3'">详情></text>
							</view>
							<view class="welfare-box">
								<text class="num">{{item.num}}</text>
								<button class="btn" size="mini" @click="welfareclick(item.hs_type)">选择奖励</button>
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>


		<view class="problem">
			<view class="title">常见问题</view>
			<view class="list">
				<uni-collapse ref="collapse">
					<uni-collapse-item v-for="(item, index) in cjwtList" :key="index" thumb="/static/img/q.png"
						:title="item.title">
						<view class="content">
							<view class="text">
								<rich-text :nodes="item.content"></rich-text>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>

		<view class="getTime" v-if="isShow">
			<view class="popup"  @click.stop="close"></view>
			<!-- 预约时间段的写法 -->
			<times @change="getTime" @close="close" beginTime="09:00:00" endTime="20:00:00" :timeInterval="2"
				:isQuantum="true"></times>
		</view>

		<view class="submit">
			<view class="submit-btn">
				<button type="warn" @click="addHsOrder()">立即下单</button>
			</view>
		</view>

		<!-- 弹框 -->


		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz1"></view>
		<view class="modal-dialog two" v-if="isHsbz1">
			<view class="modal-content">
				<view class="title" style="color: #000;">温馨提示</view>
				<view style="margin: 40rpx 0;">感谢您对爱心计划的支持让温暖延续</view>
				<button @tap="toclose1()" style="font-size: 30rpx;background: linear-gradient(135deg, #0fD0C3, #3ebcc5);color: #fff;">
					确认
				</button>
			</view>
		</view>

		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz"></view>
		<view class="modal-dialog" v-if="isHsbz">
			<view class="modal-content">
				<image @tap="toclose()" class="close" :src='this.commonImg() + "close.png"'></image>
				<view class="title">确认预约</view>
				<view class="content">
					<text>为了给您良好的回收体验，确保回收奖励的顺利发放，请再次确认以下问题</text>
					<view class="tips">
						<view class="item">
							<image :src='this.commonImg() + "problem1.png"'></image>
							<view class="title">
								<text>符合回收标准</text>
								<view class="nr">请确认回收衣物是否不脏，不破，不染色，干净干燥、不发霉变形。</view>
							</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "problem2.png"'></image>
							<view class="title">
								<text>重量超过5kg</text>
								<view class="nr">
									请确认打包的衣物鞋包重量超过5kg，<text>如果大于30kg请先联系客服确认。</text>
									<text class="kf" @click="tokefu()">点击联系客服</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "problem3.png"'></image>
							<view class="title">
								<text>是否有贵重物品</text>
								<view class="nr">
									请仔细检查回收衣物中，是否遗漏贵重或重要物品，以免给您带来损失。
								</view>
							</view>
						</view>
					</view>
					<view class="tishi">*提供不合格衣物将会被限制下单功能及无法获得回收奖励</view>
				</view>
				<view class="button" @tap="queren()">
					已阅读并确认
				</view>
			</view>
		</view>
		<view class="block"></view>
		<custom-tab-bar :selected="1" />
	</view>
</template>

<script>
	import times from '@/components/pretty-times/pretty-times.vue'
	import customTabBar from "@/components/customTabBar/index.vue"
	export default {
		components: {
			times,
			customTabBar
		},
		data() {
			return {
				timeActive: 0,
				type: "1",
				weight: "1",
				welfare: '',
				tabList: [{
					title: '上门回收'
				}, {
					title: '免费赠送'
				}],
				welfareList: [{
						hs_type: '2',
						label: '现金回收',
						src: '/static/img/cash.jpg',
						text: '1kg旧衣=0.3~0.5元现金，发放到账户余额，可自行提现。',
						num: '10.18万人选择'
					},
					{
						hs_type: '3',
						label: '爱心计划',
						src: '/static/img/dog.jpg',
						text: '1单旧衣回收=1顿猫狗口粮，帮您捐赠到流浪动物救助站。',
						num: '38.6万人选择'
					},

				],


				pass: false,
				typeList: [{
					name: '旧衣服',
					img: this.commonImg() + "/category-1.png",
					sort: '1',
					bg: '#ffebeb',
					num: 1
				}, {
					name: '旧鞋子',
					img: this.commonImg() + "/category-2.png",
					sort: '2',
					bg: '#ffefcf',
					num: 2
				}, {
					name: '旧包包',
					img: this.commonImg() + "/category-3.png",
					sort: '3',
					bg: '#e3f0ff',
					num: 3
				}, {
					name: '旧四件套',
					img: this.commonImg() + "/category-4.png",
					sort: '4',
					bg: '#d8f4ee',
					num: 4
				}, ],
				listAddress: [],
				showModal: false,
				atts: [],
				orderGoods: [],
				addlength: false,
				recinfo: '',
				selectTime: '',
				yy_date: '',
				start_time: '',
				end_time: '',
				isShow: false,
				cjwtList: [],
				acctoken: '',
				is_true: false,
				checked: true,
				isHsbz: false,
				isHsbz1: false,
				hs_type: '',
				wx_address: '',
				token: '',
	
				user: {
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，点击登录账户',
					tags: '普通用户',
					id: ''
				},
			}
		},

		onLoad(option) {
			console.log(option)
			if (option.pid) {
				uni.setStorageSync("share_pid", option.pid);
			}
		},
		onShow() {
			
			uni.getStorage({
				key: 'selectAddress',
				success: (e) => {
					this.recinfo = e.data;
					if (this.recinfo.detailInfo) {
						this.wx_address = this.recinfo
					} else {
						this.wx_address = ''
					}
					if (this.recinfo.id || this.recinfo.detailInfo) {
						this.addlength = true;
					} else {
						this.addlength = false;
					}
					uni.removeStorage({
						key: 'selectAddress'
					})
				}
			});

			this.$api.http.get('common-aid', {}).then(res => {
				if (res) {
					this.cjwtList = res.data.aid.desc;
				}
			})

			this.token = uni.getStorageSync("token");
			if(this.token){
				this.$api.http.get('user-info', {}).then(res => {
					if (res.code == 1) {
						var userInfo = res.data.member;
						var order_static = res.data.order_static;
						if (userInfo.user_name == "") {
							this.user.user_name = "请设置用户名"
						} else {
							this.user.user_name = userInfo.user_name;
						}
						this.user.id = userInfo.id
						if (userInfo.head_img) {
							// #ifdef MP
							this.user.profile = userInfo.head_img;
							// #endif
						}
					}
				})
			}
		

		},
		methods: {
			tokefu() {
				uni.navigateTo({
					url: "/pages/kefu/index"
				})
			},
			toclose() {
				this.isHsbz = false
			},
			toclose1() {
				this.isHsbz1 = false
			},

			toSetting() {
				if (this.token) {
					uni.navigateTo({
						url: '../../user/setting/setting'
					})
				} else {
					this.toLogin();
				}
			},
			details() {
				uni.navigateTo({
					url: '../../../packagePages/tabBar/order/maogou'
				})
			},

			// toLogin() {
			// 	uni.showToast({
			// 		title: '请登录',
			// 		icon: "none"
			// 	});
			// 	uni.setStorageSync("path", '/pages/tabBar/user/user')
			// 	setTimeout(() => {
			// 		uni.navigateTo({
			// 			url: '../../login/login'
			// 		})
			// 	}, 700)

			// },
			queren() {
				uni.showLoading({
					title: '请稍后'
				})
				console.log(uni.getStorageSync("recycle_type"))
				this.$api.http.post('recycle-order-add', {
					type: this.hs_type,
					wx_address: JSON.stringify(this.wx_address),
					address_id: this.recinfo.id,
					weight: this.getWeightContent(this.weight),
					yy_date: this.yy_date,
					yy_time: this.start_time + '~' + this.end_time,
					from: 2,
					recycle_type:uni.getStorageSync("recycle_type")?uni.getStorageSync("recycle_type"):''
				}).then(res => {
					if (res) {
						if (res.code == 1) {
							this.isHsbz = false
							uni.navigateTo({
								url: "/pages/tabBar/order/success"
							})
							return
						} else {
							this.$api.msg(res.msg)
						}
					}
				})
				uni.hideLoading();
			},
			selfChangde() {
				this.checked = !this.checked
			},
			toyszc() {
				uni.navigateTo({
					url: '/pages/user/yszc/index'
				})
			},
			// 时间选择事件
			selectTimeEvent(index) {
				console.log(index)
				this.timeActive = index
				this.welfare = ''
				if (this.timeActive == 0) {
					this.hs_type = '2'
				} else {
					this.hs_type = '1'
				}


			},
			getTime(e) {
				console.log(e)
				if (e == "暂无选择") {
					return
				}
				this.yy_date = e.yy_date
				this.start_time = e.start_time
				this.end_time = e.end_time
				this.selectTime = `${this.yy_date} ` + `${this.start_time} ~` + `${this.end_time} `
			},
			//选择收货地址
			selectAddress() {
				var token = uni.getStorageSync("token")
				if (token != "") {
					uni.navigateTo({
						url: '/pages/user/address/index?type=select'
					})
				} else {
					this.toLogin()
				}
			},
			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});
				// uni.setStorageSync("path", '/pages/tabBar/order/add')
				setTimeout(() => {
					uni.navigateTo({
						url: '../../login/login?path=/pages/tabBar/order/add'
					})
				}, 700)
			},
			changeType(e, d) {
				this.type = e;
			},
			changeWeight(e) {
				this.weight = e;
			},
			welfareclick(e) {
				if (e == 3) {
					this.isHsbz1 = true
					// uni.showModal({
					// 	title: '温馨提示',
					// 	content: '感谢您对爱心计划的支持让温暖延续',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });


				}


				this.hs_type = e
				this.welfare = e;
			},

			getWeightContent(weight) {
				switch (weight) {
					case "1":
						return "5-20"
						break;
					case "2":
						return "20-50"
						break;
					case "3":
						return ">50"
						break;
				}
			},
			addHsOrder() {

				if (!this.recinfo.id & !this.wx_address) {
					this.pass = true
					this.$api.msg("请选择取件地址");

					uni.createSelectorQuery().select('#subscribe').boundingClientRect(function(rect) {
						console.log(rect)
						// 使用scrollIntoView方法滚动到目标元素
						uni.pageScrollTo({
							scrollTop: rect.top / 2,
							duration: 500
						})
					}).exec();
					return false;
				}
				if (!this.selectTime) {
					this.pass = true
					this.$api.msg("请选择预约时间");
					uni.createSelectorQuery().select('#subscribe').boundingClientRect(function(rect) {
						// 使用scrollIntoView方法滚动到目标元素
						console.log(rect)
						uni.pageScrollTo({
							scrollTop: rect.top / 2,
							duration: 500
						})
					}).exec();
					return false;
				}
				if (!this.welfare) {
					this.$api.msg("请选择回收奖励");
					uni.createSelectorQuery().select('#reward').boundingClientRect(function(rect) {
						// 使用scrollIntoView方法滚动到目标元素

						uni.pageScrollTo({
							scrollTop: rect.top,
							duration: 500
						})
					}).exec();
					return false;
				}


				this.pass = false
				this.isHsbz = true
			},
			getAtts(value) {
				console.log("atts", value);
				this.atts = value;
			},
			bindTimeChange() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.block {
		height: 130rpx;
	}

	.welfare-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0 !important;

		.label {
			color: #fff;
			font-weight: bold;
			padding: 6rpx 10rpx;
			border-radius: 10rpx;
			text-align: center;
			background: #ff4c45;
			margin-right: 10rpx;
			font-size: 20rpx;
		}

		.btn {
			animation: zoomInOut 2s infinite;
		}

	}

	.welfare-list {
		padding: 20rpx;
		padding-top: 0;

	}

	.welfare-list .content {
		border: 1px solid #ececec;
		border-radius: 10rpx;
		padding-bottom: 20rpx !important;
	}

	.welfare-list .content button {
		margin: 0;
		background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
		color: #fff;
		font-size: 20rpx;
	}

	.welfare-list .content .num {
		color: #999;
		font-size: 20rpx;
	}

	.yszc {
		// width: 92%;
		// margin-top: 30rpx;
		padding: 0 40rpx 30rpx;
		color: #333;
		font-size: 26rpx;
		position: relative;
		background: #fff;

		.note {
			margin-left: 50rpx;

			text {
				// color: #02BEBD;
				color: #ff4c45;
			}
		}

		.checkbox {
			position: absolute;
			top: 0;

			uni-checkbox .uni-checkbox-input {
				border-radius: 50% !important;
				color: #21A56C !important;
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				border: 1rpx solid #21A56C !important;
			}

			uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				color: #fff !important;
				background: #21A56C !important;
			}

			uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				font-size: 30rpx !important;
				font-weight: bold !important;
				color: #fff !important;
				background: #21A56C !important;
				border: #21A56C !important;
			}

			/* 微信中样式 */
			/* #ifdef APP-PLUS ||MP-WEIXIN */
			checkbox .wx-checkbox-input {
				border-radius: 50% !important;
				color: #21A56C !important;
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				border: 1rpx solid #21A56C !important;
			}

			checkbox .wx-checkbox-input.wx-checkbox-input-checked {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				color: #fff !important;
				background: #21A56C !important;
			}

			checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				font-size: 30rpx !important;
				font-weight: bold !important;
				color: #fff !important;
				background: #21A56C !important;
				border: #21A56C !important;
			}

			/* #endif */
		}
	}

	.uni-flex {
		display: flex;
	}

	.uni-row {
		flex-direction: row;
	}

	.header {
		color: #fff;
		background-color: #3cbdc5;
		background-position: bottom;
		padding: 15rpx 4% 60rpx;
		top: 0;
		width: 92%;
		z-index: 99;
		/*  #ifdef  APP-PLUS  */
		padding-top: 80rpx;
		align-items: center;

		/*  #endif  */
		.img-profile {
			margin-right: 30upx;
			position: relative;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				vertical-align: middle;
			}

			.member {
				position: absolute;
				bottom: -10rpx;
				right: 0;
				left: 0;
				margin: 0 auto;

				image {
					width: 140rpx;
					border-radius: 0;
				}
			}
		}

		.usertag {
			padding: 0 20upx;
			background-color: #bb965f;
			border-radius: 30upx;
			font-size: 24upx;
			margin-right: 20upx;
			border: 1px solid #bb965f;
			line-height: 1.6;
		}

		.usertag.login {
			background-color: inherit;
			border: 0;
			padding: 0;
		}

		.nikename {
			font-size: 30rpx;
			position: relative;
			padding-right: 115rpx;
			font-weight: bold;
			margin-bottom: 15rpx;

			.usertag {
				position: absolute;
				top: 10rpx;
				right: 0;
				line-height: 32rpx;
				padding: 0 15rpx;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			position: absolute;
			top: 40rpx;
			/*  #ifdef  APP-PLUS  */
			top: 80upx;
			/*  #endif  */
			right: 4%;
			z-index: 999;

			.icon {
				color: #090b0e;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
				margin-left: 15rpx;
			}
		}
	}

	.tab {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background: #fff;
		margin-top: -20rpx;
		overflow: hidden;

		.tab-item {
			padding: 30rpx 0;
			float: left;
			width: 50%;
			text-align: center;
			font-weight: bold;
			background: #e8ecf8;
			font-size: 28rpx;
			color: #9fa4ae;
		}

		.active {
			background: #fff !important;
			color: #666 !important;
		}
	}

	.ygzl-title {
		font-size: 28rpx;
	}

	.getTime {
		position: relative;
		width: 100%;

		.popup {
			position: fixed;
			width: 100%;
			height: 100%;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 9;
		}
	}

	.hspl {
		background-color: #FFFFFF;
		padding: 40rpx;
		// width: 92%;
		// margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.gg-title {
		font-size: 28rpx;
		color: #222222;
		margin-bottom: 20rpx;
	}

	.hspl-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hspl-content-item {
		flex: 1;
		text-align: center;

		text {
			display: block;
			font-size: 26rpx;
			line-height: 50rpx;
			margin-top: 20rpx;
		}
	}

	.hspl-content-item image {
		width: 80rpx;
		display: block;
		margin: 12rpx auto 0;
		padding: 10rpx;
		border-radius: 25rpx;
	}


	.hsyq {
		background-color: #FFFFFF;
		width: 92%;
		margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.hsyq-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hsyq-content-item {
		flex: 1;
		text-align: center;
	}

	.hsyq-content-item image {
		width: 130upx;
		height: 130upx;
	}

	.hsyq-content-item-remark {
		font-size: 28upx;
		color: #5c5c5c;
	}

	.ygzl {
		background-color: #FFFFFF;
		// width: 92%;
		// margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 40rpx;

	}

	.ygzl-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ygzl-content-item {
		padding: 15rpx;
		width: 27%;
		background: #f6f6f6;
		text-align: center;
		border-radius: 10rpx;

		text {
			line-height: 40upx;
			font-size: 28upx;
			color: #333;
			display: block;
		}

		text.ms {
			font-size: 24upx;
			color: #999;
		}
	}

	.ygzl-content-item.select {
		border: 2px solid #3cbdc5;
		background: #fff;

		text {
			color: #3cbdc5;
		}

		text.ms {
			color: #3cbdc5;
		}
	}

	.ygzl-mark {
		margin-top: 30upx;
		display: flex;
		color: #222222;
		font-size: 26upx;
		height: 80upx;
		line-height: 80upx;
		justify-content: space-between;
	}

	.ygzl-mark-btn {
		border-radius: 10upx;
		background: #31b977;
		color: #FFFFFF;
		text-align: center;
		width: 180upx;
	}

	.ygzl-file {
		margin-top: 30upx;
	}

	.explain {
		background-color: #FFFFFF;
		width: 92%;
		margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.explain-title {
		text-align: center;
		color: #31b977;
		font-size: 30upx;
		margin-bottom: 30upx;
		font-weight: bold;
	}

	.explain-content {
		margin-top: 15upx;
		color: #666;
		font-size: 26upx;
		line-height: 40rpx;
	}

	.subscribe {
		background-color: #FFFFFF;
		// width: 92%;
		// margin: 30rpx auto 0;
		// border-radius: 10px;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		margin: 0 20rpx;

		&-view {
			position: relative;
			border-bottom: solid 1rpx #F5F5F5;


			&-left {
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999;
				margin: 20rpx auto;

				&.isrequired {
					position: relative;
					padding-right: 16rpx;

					&::before {
						content: "*";
						display: inline-block;
						line-height: 80rpx;
						position: absolute;
						right: 0px;
						color: #d0021b;
					}
				}
			}

			&-right {
				line-height: 40rpx;
				position: relative;
				padding-right: 20rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;

				&.nodata {
					color: rgba(153, 153, 153, 1);
				}

				&.isselect {
					position: relative;

					&::before {
						content: " ";
						display: inline-block;
						width: 6px;
						height: 6px;
						position: absolute;
						top: 50%;
						right: 0rpx;
						border-width: 2px 2px 0 0;
						border-color: #b0b0b0;
						border-style: solid;
						transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					}
				}
			}

			.tel-name {
				width: 100%;
				display: flex;
				font-size: 30upx;

				.tel {
					margin-left: 40upx;
				}

				.radio {
					display: flex;
					width: 180rpx;
					margin-left: 30rpx;

					.center {
						padding-left: 15rpx;
					}
				}
			}

			.addres {
				width: 100%;
				font-size: 26upx;
				color: #999;
				margin-bottom: 20rpx;
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 190rpx;
		padding: 10rpx;
		z-index: 5;
		left: 0;
		right: 0;
	}

	.submit-explain {
		font-size: 28upx;
		color: #222222;
		text-align: center;
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		button {
			background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
			font-size: 30rpx;
			color: #fff;
			border: none;
			width: 90%;
			animation: zoomInOut 2s infinite;
		}
	}

	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
			/* 放大1.5倍 */
		}
	}


	.order-goods {
		position: fixed;
		bottom: 60upx;
		left: 30upx;
		width: 100upx;
		height: 100upx;
		z-index: 99;
	}

	.order-goods image {
		width: 100%;
		height: 100%;
	}

	.order-goods-number {
		border-radius: 50%;
		width: 42upx;
		height: 42upx;
		line-height: 42upx;
		background: #E64043;
		color: #FFFFFF;
		position: fixed;
		bottom: 115upx;
		left: 100upx;
		text-align: center;
	}

	.order-modal {
		display: flex;
	}

	.order-modal-item {
		flex: 1;
		font-size: 32upx;
		padding: 10upx 6upx;
		text-align: center;
	}

	.require {
		display: flex;
		width: 92%;
		margin: 30rpx auto 0;
		justify-content: space-between;

		.item {
			background: #ddfeed;
			padding: 30rpx 50rpx;
			border-radius: 20rpx;
			color: #11824c;

			.bt {
				font-size: 30rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
				display: block;
			}

			.ms {
				font-size: 22rpx;
				display: block;
			}
		}

		.item:nth-child(2) {
			background: #fff8db;
			color: #97570d;
		}

		.item:nth-child(3) {
			background: #d9f1fd;
			color: #1d5e7c;
		}
	}

	.problem {
		margin: 30rpx auto 120rpx;
		width: 92%;
		overflow: hidden;

		.select {
			border: 2rpx solid #3cbdc5;
		}

		.title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.list {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 50rpx;

			.content {
				padding: 0 4% 0;
				font-size: 24rpx;
				line-height: 45rpx;
				color: #666;

				.text {
					view {
						margin-top: 30rpx;
					}

					p {
						margin-top: 10rpx;
					}
				}
			}

			.uni-collapse,
			.uni-collapse-item__title-box {
				background-color: initial;
			}

			.uni-collapse-item__title-img {
				width: 18px;
				height: 18px;
			}

			.uni-icons.data-v-a2e81f6e {
				color: #2291e0 !important;
				font-weight: bold;
			}

		}

		.partners {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 40rpx;

			image {
				width: 32%;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
		}

	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-radius: 15rpx 15rpx 0 0;
		z-index: 999;
	}
	.two{
		width: 74%;
		top: 30%;
		bottom: auto;
		margin: 0 auto;
		left: 0;
		right: 0;
			border-radius: 15rpx;
	}

	.modal-content {
		line-height: 40rpx;
		padding: 40rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 40rpx;
			top: 48rpx;
		}

		.title {
			font-size: 34rpx;
			color: #3ebcc5;
			font-weight: bold;
			text-align: center;
		}

		.content {
			margin-top: 30rpx;
		
			text {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
			}

			.tips {
				margin-top: 20rpx;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.title {
					border-bottom: 1px solid #eee;
					width: 80%;
					font-weight: normal;
					line-height: 1.5;
					text-align: left;
					padding-bottom: 20rpx;

					text {
						color: #333;
						font-size: 26rpx;
						font-weight: normal;
					}

					.nr {
						color: #999;
						font-size: 24rpx;

						text {
							color: #e3595a;
						}

						text.kf {
							color: #4593d5;
						}
					}
				}
			}

			.tishi {
				color: #e3595a;
				font-size: 26rpx;
				margin-bottom: 50rpx;
			}
		}

		.button {
			background-color: #3ebcc5;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			border-radius: 10rpx;
		}
	}
</style>